<template>
	<div class="star" v-bind:class="starType">
		<span v-for="itemClass in itemClasses" v-bind:class="itemClass" class="star-item" track-by="$index">
		</span>
	</div>
</template>

<script type="text/ecmascript-6">
	const LENGTH = 5;
	const CLS_ON = 'on';
	const CLS_HALF = 'half';
	const CLS_OFF = 'off';

	export default {
		props: {
			size: {
				type: Number
			},
			score: {
				type: Number
			}
		},
		computed: {
			starType() {
				return 'star-' + this.size;
			},
			itemClasses() {
				let result = [];
				let score = Math.floor(this.score * 2) / 2;
				let hasDecimal = score % 1 !== 0;
				let integer = Math.floor(score);
				for(let i = 0; i < integer; i++) {
					result.push(CLS_ON);
				}
				if(hasDecimal) {
					result.push(CLS_HALF);
				}
				while(result.length < LENGTH) {
					result.push(CLS_OFF);
				}
				return result;
			}
		}
	};
</script>

<style lang="less">
	@import '../../common/less/z.less';
	@import '../../common/less/css3.less';
	@import '../../common/less/appstyle.less';
	.star {
		.font-s0();
		.star-item {
			.d-ib();
			.bgr-no();
		}
		&.star-48 {
			.star-item {
				.wh(20px);
				margin-right: 22px;
				.bg-sz(20px, 20px);
				&:last-child {
					margin-right: 0;
				}
				&.on {
					.bg-image('../../../resource/img/star48_on@2x.png', '../../../resource/img/star48_on@3x.png');
				}
				&.half {
					.bg-image('../../../resource/img/star48_half@2x.png', '../../../resource/img/star48_half@3x.png');
				}
				&.off {
					.bg-image('../../../resource/img/star48_off@2x.png', '../../../resource/img/star48_off@3x.png');
				}
			}
		}
		&.star-36 {
			.star-item {
				.wh(16px);
				margin-right: 6px;
				.bg-sz(15px, 15px);
				&.last-child {
					margin-right: 0;
				}
				&.on {
					.bg-image('../../../resource/img/star36_on@2x.png', '../../../resource/img/star36_on@3x.png');
				}
				&.half {
					.bg-image('../../../resource/img/star36_half@2x.png', '../../../resource/img/star36_half@3x.png');
				}
				&.off {
					.bg-image('../../../resource/img/star36_off@2x.png', '../../../resource/img/star36_off@3x.png');
				}
			}
		}
		&.star-24 {
			.star-item {
				.wh(10px);
				margin-right: 3px;
				.bg-sz(10px, 10px);
				&.last-child {
					margin-right: 0;
				}
				&.on {
					.bg-image('../../../resource/img/star24_on@2x.png', '../../../resource/img/star24_on@3x.png');
				}
				&.half {
					.bg-image('../../../resource/img/star24_half@2x.png', '../../../resource/img/star24_half@3x.png');
				}
				&.off {
					.bg-image('../../../resource/img/star24_off@2x.png', '../../../resource/img/star24_off@3x.png');
				}
			}
		}
	}
</style>